import React, { Component } from "react";
import * as echarts from 'echarts';
class MatrixTree1 extends Component{
    constructor(props){
        super(props);
        this.state={
            chartDara:props.chartData,
            that:props.that
        }
    }
    componentWillReceiveProps(props) {
        if (JSON.stringify(props.chartData) != JSON.stringify(this.state.chartData)) {
            this.setState({
                chartData: props.chartData,
                that: props.that
            }, () => {
                this.drawChart();
            })
        }
    }
    componentDidMount(){
        this.drawChart()
       
    }
    drawChart(){
        if(JSON.stringify(this.state.chartData) != '[]') {
            var data = this.state.chartDara
            var Scolor=['#16387f', '#0e2859', '#1b4494', '#3968a0', '#013998', '#4170a8', 
            '#0091FE', '#0080FF', '#1751B2', '#013998', '#9ACCFF', '#0091FE', '#0080FF', '#1751B2', '#013998'];
            var Scolor1=['#33cc00', '#339933', '#339966', '#339999', '#33cc99', '#006666', '#336633',
             '#33cc00', '#339933', '#339966', '#339999', '#33cc99', '#006666', '#336633'];
            var Scolor2=[
                '#b9b4f7', '#b8b3f6', '#a5a1ee', '#938fe3', '#756ea1',
                '#9592e3', '#232452', '#9e93bd', '#b9b4f7', '#b8b3f6', 
                '#a5a1ee', '#938fe3', '#756ea1', '#9592e3', '#232452', '#9e93bd'
                // '#4169e1', '#1e90ff', '#6495ed', '#00bfff', '#87cefa',
                // '#00ced1', '#48d1cc', '#40e0d0',
            ];
            if(data.length > 0){
                for(var prop in data[0].children){
                    var index = Math.floor(Math.random()*15);
                    data[0].children[prop].itemStyle={
                        color : Scolor[index]
                    }
                }
                for(var prop2 in data[1].children){
                    var index2 = Math.floor(Math.random() * 10);
                    data[1].children[prop2].itemStyle={
                        color : Scolor2[index2]
                    }
                }
                for(var prop1 in data[2].children){
                    var index1 = Math.floor(Math.random() * 10);
                    data[2].children[prop1].itemStyle={
                        color : Scolor1[index1]
                    }
                }

                data.upperLabel= {
                    show: false
                   
                   }
            }
           
            // data[2].itemStyle={
            //     color:'#0091FE'
            // }
            // data[0].children[0].itemStyle={
            //     color:'#0080FF'
            // }
          
            
            let chart =echarts.init(document.getElementById('treeChart'));
            var option = {
    
                tooltip: {},
                
                series: [{
                    left:'0%',
                    top:'0%',
                    type: 'treemap',
                    visibleMin: 300,
                    data: data,
                    leafDepth: 3, //呈现层级，若为1加载时仅展开一层，接下来的每一层通过单击进入，如上面的效果图所示，  
                    //每一层级呈现的样式  
                    label: {
                        show: true,
                        fontSize: 15,
                         
                        formatter: function(params) {
                            var arr = [
                                params.name
                            ];
                            return arr.join('\n');
                        }
                    },
                    upperLabel: {
                        show: true,
                        height: 20,
                        fontSize:15
                    },
                    itemStyle: {
                        borderWidth:0,
                        borderColor:'#0b1b3d',
                    
                        color: '#ffffff',
                        
                        
                        
                    },
                    levels: [{
                            colorSaturation: [0.1, 0.8],
                            upperLabel: {
                                show: false,
                                height: 20
                            },
                            
                            itemStyle: {
                              
                                
                                normal: {
                                    borderColor: '#333',
                                    borderWidth: 0,
                                    gapWidth: 1
                                }
                            }
                        },
                        {
                            colorSaturation: [0.3, 0.7],
                           
                            colorMappingBy: 'id',
                            itemStyle: {
                                
                                normal: {
                                    // borderColorSaturation: 0.7,
                                    gapWidth: 3,
                                    borderWidth: 1
                                }
                            }
                        },
                        {
                            colorSaturation: [0.3, 0.7],
                            
                            colorMappingBy: 'id',
                            itemStyle: {
                               
                                normal: {
                                    // borderColorSaturation: 0.7,
                                    gapWidth: 3,
                                    borderWidth: 1
                                }
                            }
                        },
                    ],
                    breadcrumb: {
                        show: true,
                        // "height": 22,
                        left: "1%",
                        top: "80.5%",
                        emptyItemWidth: 25,
                        itemStyle: {
                            normal: {
                                color: "#fff",
                                borderColor: "rgba(255,255,255,0.7)",
                                borderWidth: 1,
                                shadowColor: "rgba(150,150,150,1)",
                                shadowBlur: 3,
                                shadowOffsetX: 0,
                                shadowOffsetY: 0,
                                textStyle: {
                                    color: "#000",
                                    fontWeight: 'bold'
                                }
                            },
                            emphasis: {
                                textStyle: {}
                            }
                        }
                    },
                }]
            };
            chart.setOption(option);
        window.onresize = chart.resize;
        }
        

    }
    render() {
        let chartStyle = {
            height: '115%',
            width: '125%',
        };
        return (<div id='treeChart' style={chartStyle} />)
    }

}
export{ MatrixTree1}
